<template>
    <!-- :style 动态设置 CSS 变量的值： -->
    <div class="avatar-group" :style="{ '--size': size, '--overlap': overlap }">
      <!-- 渲染前 maxShow-1 个头像 -->
      <img
        v-for="(avatar, index) in showAvatars"
        :key="index"
        :src="avatar"
        class="avatar-item"
        :style="{ borderColor: borderColor }"
        alt="avatar"
      />
      <!-- 超出部分显示「+N」 -->
      <div
        v-if="hiddenCount > 0"
        class="avatar-more"
        :style="{ borderColor: borderColor }"
      >
        +{{ hiddenCount }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    // 头像列表
    avatars: {
      type: Array,
      required: true,
      default: () => []
    },
    // 最多显示的头像数（不含「+N」，默认 3）
    maxShow: {
      type: Number,
      default: 3
    },
    // 头像尺寸 默认 40px）
    size: {
      type: String,
      default: '40px'
    },
    // (头像尺寸 支持重叠程度，默认 10px）
    overlap: {
      type: String,
      default: '10px'
    },
    // 头像边框颜色（默认白色）
    borderColor: {
      type: String,
      default: '#fff'
    }
  })
  
  // 计算要显示的头像（前 maxShow-1 个）
  const showAvatars = computed(() => {
    return props.avatars.slice(0, props.maxShow - 1)
  })
  
  // 计算隐藏的头像数量
  const hiddenCount = computed(() => {
    return props.avatars.length - (props.maxShow - 1)
  })
  </script>
  
  <style scoped>
  .avatar-group {
    display: flex;
    align-items: center;
    --size: 40px;
    --overlap: 10px;
  }
  
  .avatar-item {
    width: var(--size);
    height: var(--size);
    border-radius: 50%; 
    border: 2px solid var(--border-color, #fff);
    object-fit: cover; /* 图片自适应裁剪 */
    margin-left: calc(var(--overlap) * -1);
    &:first-child {
      margin-left: 0;
    }
  }
  
  .avatar-more {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid var(--border-color, #fff); 
    background-color: #666; 
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-left: calc(var(--overlap) * -1);
  }
  </style>